<template>
	<view>
		<view class="now_city">
			<view class="now">
				当前定位城市
			</view>
			<view class="now_name">
				<image class="address_img" src="https://jiechendy.sdshengyue.cn/uploads/ba/9e59922a7f90d081126147c0e0f58d.png"></image>
				<view class="name">{{city_name}}</view>
				<view @click="getMyLocation()" style="color: #4173FF;font-size: 28rpx;">重新定位</view>
			</view>
			<view class="">
				{{message}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				city_name:'',
				message:''
			}
		},
		methods: {
			getMyLocation(){
				uni.chooseLocation({ 
				  success: (res) => {
				    console.log("chooseLocation success: ", res);
					this.message = res
				  },
				  fail: (err) => {
				    console.log("chooseLocation fail: " + err.errMsg);
				  },
				});
			}
		},
		onShow() {
			var that = this
			uni.getLocation({
				type: 'gcj02',
				success(res) {
					console.log(`经度${res.longitude}纬度${res.latitude}`);
					that.city_name = res.city
				},
				fail(res) {
					console.log("getLocation调用失败", res);
				},
			});
		}
	}
</script>

<style lang="scss">
.now_city{
	width: 95%;
	margin-left: 2.5%;
	margin-top: 40rpx;
	.now{
		color: #888888;
	}
	.now_name{
		font-size:30rpx;
		margin-top: 20rpx;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #fff;
		border-radius: 5rpx;
		display:flex;
		.name{
			width: 500rpx;
		}
	}
	.address_img{
		width: 40rpx;
		height: 40rpx;
		margin: 20rpx 20rpx;
	}
}
</style>
